{{ template "base_login.html"}}
{{define "title"}}
    登录
{{end}}

{{define "head"}}{{end}}

{{define "li"}}
    <li class="layui-nav-item">
        <a href="/register">注册</a>
    </li>
{{end}}

{{define "content"}}
    <div class="layui-body" style="padding: 15px">
        <form class="layui-form layui-form-pane1" lay-filter="first">
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline" style="width: 50%">
                    <input type="text" name="mail" lay-verify="required" lay-reqText="邮箱不能为空" required placeholder="请输入邮箱" autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-mid layui-word-aux" style="color: #FF5722">*</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline" style="width: 50%">
                    <input type="Password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" style="color: #FF5722">*</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline" style="width: 25%">
                    <input type="text" name="verifiyCode" id="verifiyCode" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                </div>
                <canvas id="canvas" width="100" height="43" ></canvas>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit type="button">登录</button>
                </div>
            </div>
        </form>
    </div>
{{end}}

{{define "script"}}
    <script>
        layui.use(['form', 'element', 'jquery'], function(rewq){
            var form = layui.form,
                layer = layui.layer,
                $ = layui.jquery

            var show_num = [];
            //监听提交
            form.on('submit', function(data){
                form_data = data.field;
                var val = form_data.verifiyCode.toLowerCase();
                var num = show_num.join("");

                if(val===''){
                    layer.msg('请输入验证码！');
                }else if(val === num){
                    $("#verifiyCode").val('');
                    draw(show_num);
                    $.ajax({
                        url:"/api/login",
                        type:"POST",   //请求类型 ,
                        async:false,
                        data: form_data,
                        success:function (res) {
                            if(res.code === "200"){
                                alert("登录成功！");
                                var next_url = GetQueryString('next')
                                if(next_url === null){
                                    next_url = "/index"
                                }
                                location.href = next_url
                                return false
                            }
                            else{
                                alert(res.msg)
                            }
                        },
                        error:function f(res) {
                            alert("请求失败！状态码：" + res.status)
                        }
                    })
                }else{
                    alert('验证码错误！请重新输入！');
                    $("#verifiyCode").val('');
                    draw(show_num);
                }
                return false
            });

            $(function (){
                show_num = [];
                draw(show_num);

                $("#canvas").on('click',function(){
                    draw(show_num);
                })

            });

            function draw(show_num) {
                var canvas_width=$("#canvas").width();
                var canvas_height=$("#canvas").height();
                var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
                var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
                canvas.width = canvas_width;
                canvas.height = canvas_height;
                var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                var aCode = sCode.split(",");
                var aLength = aCode.length;//获取到数组的长度

                for (var i = 0; i <= 3; i++) {
                    var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                    var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                    var txt = aCode[j];//得到随机的一个内容
                    show_num[i] = txt.toLowerCase();
                    var x = 10 + i * 20;//文字在canvas上的x坐标
                    var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                    context.font = "bold 23px 微软雅黑";

                    context.translate(x, y);
                    context.rotate(deg);

                    context.fillStyle = randomColor();
                    context.fillText(txt, 0, 0);

                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                for (var i = 0; i <= 5; i++) { //验证码上显示线条
                    context.strokeStyle = randomColor();
                    context.beginPath();
                    context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.stroke();
                }
                for (var i = 0; i <= 30; i++) { //验证码上显示小点
                    context.strokeStyle = randomColor();
                    context.beginPath();
                    var x = Math.random() * canvas_width;
                    var y = Math.random() * canvas_height;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.stroke();
                }
            }

            function randomColor() {//得到随机的颜色值
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            }

        });
    </script>
{{ end }}